<template>
  <div class="notice-setting route-page">
    <!-- 页面头部 -->
    <section class="header">
      <a-page-header title="缴费通知单设置">
        <div>
          用于系统根据账单内容自动生成可下载打印的通知单模板，支持显示付款二维码。目前系统支持短信、邮件自动发送缴费通知单，用户可通过链接进行线上缴纳。
        </div>
        <template #footer>
          <a-tabs v-model:activeKey="activeTabKey" size="small">
            <a-tab-pane key="print" tab="打印模板" />
            <a-tab-pane key="send" tab="发送模板" />
            <a-tab-pane key="payment" tab="自动催缴" />
          </a-tabs>
        </template>
      </a-page-header>
    </section>
    <section class="content">
      <a-row :gutter="12" style="height: 100%">
        <a-col :span="24" class="mt-10">
          <a-card v-if="activeTabKey == 'print'" style="height: 100%">
            <template v-if="loading">
              <div class="loading-box">
                <a-spin />
              </div>
            </template>
            <template v-else-if="printList.length > 0">
              <print-list
                :list="printList"
                @addPrint="addPrint"
                @deletePrint="deletePrint"
                :page="page1"
              />
              <Pagination
                :total="total1"
                :page-size="pageSize1"
                v-model:current="page1"
                @change="onPageChange1"
              />
            </template>
            <template v-else>
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <Empty>
                  <template #description>
                    <span style="color: #999999"> 暂无打印模板</span>
                  </template>
                  <a-button type="primary" @click="addPrint">立即创建</a-button>
                </Empty>
              </div>
            </template>
          </a-card>

          <a-card v-else-if="activeTabKey == 'send'" style="height: 100%">
            <template v-if="loading">
              <div class="loading-box">
                <a-spin />
              </div>
            </template>
            <template v-else-if="sendList.length > 0">
              <send-list
                :list="sendList"
                @addSend="addSend"
                @deleteSend="deleteSend"
              />
              <Pagination
                :total="total2"
                :page-size="pageSize2"
                v-model:current="page2"
                @change="onPageChange2"
              />
            </template>
            <template v-else>
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <Empty>
                  <template #description>
                    <span style="color: #999999"> 暂无打印模板</span>
                  </template>
                  <a-button type="primary" @click="addSend">立即创建</a-button>
                </Empty>
              </div>
            </template>
          </a-card>
          <a-card v-else style="height: 100%">
            <Payment />
          </a-card>
        </a-col>
      </a-row>
    </section>

    <add-template
      :visible="printVisible"
      :tabList="printTablist"
      :title="printTitle"
      pageForm="notice"
      @onCancel="handlePrintCancel"
      @success="handlePrintSuccess"
      :id="addPrintId"
      :width="'50%'"
    />
    <edit-send
      @closeTag="sendClose"
      @success="sendSuccess"
      :visible="sendVisible"
      :id="addSendId"
    ></edit-send>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, watch } from "vue";
import { Empty, message, Pagination } from "ant-design-vue";
import request from "../../../common/utils/request";
import printList from "./PrintList.vue";
import sendList from "./SendList.vue";
import EditSend from "./EditSend.vue";
import Payment from "./Payment.vue";
import AddTemplate from "../../contract/RetreatAgreement/modules/AddTemplate.vue";
import { useRoute } from "vue-router";
export default defineComponent({
  name: "paymentNoticeSetting",
  components: {
    Empty,
    printList,
    sendList,
    EditSend,
    AddTemplate,
    Pagination,
    Payment,
  },

  setup() {
    const $route = useRoute();
    const activeTabKey = ref("");
    const printList = ref([]);
    const sendList = ref([]);

    const sendVisible = ref(false);

    const loading = ref(false);

    const sendClose = () => {
      sendVisible.value = false;
    };

    const sendSuccess = (params, id) => {
      let url = "";
      let requestMethods = "post";
      if (id > 0) {
        url = "/notice/sendTemplateEdit";
        requestMethods = "put";
        params.id = id;
      } else {
        url = "/notice/sendTemplateAdd";
      }
      request[requestMethods]("/org", url, {
        ...params,
      })
        .then((res) => {
          if (res.code == 1000) {
            message.success("保存成功");
            sendClose();
            getSendList();
          }
        })
        .catch((err) => {});
    };

    const printVisible = ref(false);
    const printTitle = ref("通知单打印模板");
    const printTablist = ref([
      { key: "tab1", title: "复制关键词", type: "copy" },
      { key: "tab2", title: "上传通知单打印模板", type: "form" },
    ]);

    const handlePrintCancel = () => {
      printVisible.value = false;
    };
    const handlePrintSuccess = () => {
      handlePrintCancel();
      page1.value = 1;
      getPrintList();
    };

    // 分页
    const page1 = ref(1);
    const pageSize1 = ref(8);
    const total1 = ref(0);

    const page2 = ref(1);
    const pageSize2 = ref(8);
    const total2 = ref(0);

    const getPrintList = () => {
      loading.value = true;
      request
        .get("/org", "/notice/templateList", {
          page: page1.value,
          limit: pageSize1.value,
        })
        .then((res) => {
          printList.value = res.list;
          total1.value = res.total;
          loading.value = false;
        })
        .catch((err) => {
          loading.value = false;
        });
    };

    const getSendList = () => {
      loading.value = true;
      request
        .get("/org", "/notice/sendList", {
          page: page2.value,
          limit: pageSize2.value,
        })
        .then((res) => {
          sendList.value = res.list;
          total2.value = res.total;
          loading.value = false;
        })
        .catch((err) => {
          loading.value = false;
        });
    };

    const getList = () => {
      if (activeTabKey.value == "print") {
        getPrintList();
      } else if (activeTabKey.value == "send") {
        getSendList();
      }
    };

    const init = () => {
      activeTabKey.value = $route.query.type || "print";
      getList();
    };

    init();

    watch(activeTabKey, getList);

    const addPrintId = ref(0);

    const addPrint = (id) => {
      console.log("addPrint", id);
      if (id > 0) {
        addPrintId.value = id;
      } else {
        addPrintId.value = 0;
      }
      printVisible.value = true;
    };

    const deletePrint = (id) => {
      // 如果是第二页之后的当前页最后一个，删除后返回前一页
      if (printList.value.length == 1 && page1.value > 1) {
        page1.value = page1.value - 1;
        if (page1.value == 1) {
          // 第一页的pagesize == 8
          pageSize1.value = 8;
        }
      }
      console.log("deletePrint", id);
      request
        .del("/org", "/notice/templateDel", {
          id: id,
        })
        .then((res) => {
          message.success("删除成功");
          getPrintList();
        });
    };

    const addSendId = ref(0);
    const addSend = (id) => {
      console.log("addSend", id);
      if (id > 0) {
        addSendId.value = id;
      } else {
        addSendId.value = 0;
      }
      sendVisible.value = true;
    };

    const deleteSend = (id) => {
      // 如果是第二页之后的当前页最后一个，删除后返回前一页
      if (sendList.value.length == 1 && page2.value > 1) {
        page2.value = page2.value - 1;
        if (page2.value == 1) {
          // 第一页的pagesize == 8
          pageSize2.value = 8;
        }
      }
      console.log("deleteSend", id);
      request
        .del("/org", "/notice/sendTemplateDel", {
          id: id,
        })
        .then((res) => {
          message.success("删除成功");
          getSendList();
        });
    };

    const onPageChange1 = (pageNumber) => {
      page1.value = pageNumber;
      if (pageNumber == 1) {
        pageSize1.value = 8;
      } else {
        if (total1.value > 9) {
          pageSize1.value = 9;
        }
      }
      getPrintList();
    };

    const onPageChange2 = (pageNumber) => {
      page2.value = pageNumber;
      if (pageNumber == 1) {
        pageSize2.value = 8;
      } else {
        if (total2.value > 9) {
          pageSize2.value = 9;
        }
      }
      getSendList();
    };

    return {
      activeTabKey,
      printList,
      sendList,
      sendVisible,
      sendClose,
      sendSuccess,

      printVisible,
      printTitle,
      printTablist,
      handlePrintCancel,
      handlePrintSuccess,

      addPrint,
      deletePrint,
      addSend,
      deleteSend,
      addPrintId,
      addSendId,

      page1,
      pageSize1,
      total1,
      onPageChange1,
      page2,
      pageSize2,
      total2,
      onPageChange2,

      loading,
    };
  },
});
</script>

<style lang="less" scoped>
.notice-setting {
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    background-color: #fff;
    margin-left: 1px;
  }

  .content {
    flex: 1;
    width: 100%;
    max-height: calc(100% - 210px);
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: auto;

    :deep(.ant-card-body) {
      height: 100%;
    }

    :deep(.ant-pagination) {
      float: right;
    }

    .loading-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
